<!DOCTYPE>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- 标题 -->
<h1 style="text-align: center;">实时日志</h1>

<!-- 显示区 -->
<div id="loggingText" contenteditable="true"
     style="width:100%;height: 500px;background-color: ghostwhite; overflow: auto;"></div>

<!-- 操作栏 -->
<!--<div style="text-align: center;">-->
<!--  <button onclick="openSocket()" style="color: black; height: 35px;">连接</button>-->
<!--  <button onclick="closeSocket()" style="color: black; height: 35px;">关闭</button>-->
<!--  <button onclick="$('#log-container').text('')" style="color: green; height: 35px;">清屏</button>-->
<!--</div>-->


<script type="text/javascript">
  //websocket对象
  let websocket = null;
  //判断当前浏览器是否支持WebSocket
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws://localhost:8080/websocket/logging");
  } else {
    console.error("不支持WebSocket");
  }
  //连接发生错误的回调方法
  websocket.onerror = function (e) {
    console.error("WebSocket连接发生错误");
  };
  //连接成功建立的回调方法
  websocket.onopen = function () {
    console.log("WebSocket连接成功")
  };
  //接收到消息的回调方法
  websocket.onmessage = function (event) {
    //追加
    if (event.data) {
      //日志内容
      let $loggingText = $("#loggingText");
      $loggingText.append(event.data);
      //是否开启自动底部
      if (window.loggingAutoBottom) {
        //滚动条自动到最底部
        $loggingText.scrollTop($loggingText[0].scrollHeight);
      }
    }
  }
  //连接关闭的回调方法
  websocket.onclose = function () {
    console.log("WebSocket连接关闭")
  };
</script>

</body>
</html>

